<template>
    <div>
      <header-tilte :title="title"></header-tilte>
      <div class="flex_center">
        <div class="bodyContent">
          <loading v-if="showLoading"></loading>
          <div v-if="!showLoading">
            <img style="width: 100%" :src="shopInfo.shop_img">
            <p class="shopInfo">{{shopInfo.shop_name}}</p>
            <div>
              <p class="aboutUsP"><span class="font-weight">营业时间：</span>{{shopInfo.work_time}}</p>
              <p class="aboutUsP"><span class="font-weight">联系我们：</span>{{shopInfo.contact}}</p>
              <p class="aboutUsP"><span class="font-weight">门店地址：</span>{{shopInfo.area_info +' '+shopInfo.address}}</p>
              <p class="aboutUsP" @click="toDetail(1)"><span class="font-weight">配送范围</span>（点击查看<i style="margin-left: 0.5rem" class="fa fa-angle-right"></i>）</p>
              <p class="aboutUsP" @click="toDetail(2)"><span class="font-weight">订水须知</span>（点击查看<i style="margin-left: 0.5rem" class="fa fa-angle-right"></i>）</p>
            </div>
            <div class="aboutUsDiv flex_center" style="display: none">
              <div class="aboutUsDetail">
                <p class="font-weight">{{detailTitle}}</p>
                <div style="padding: 0.5rem 0" v-html="detailContent"></div>
                <mu-button color="primary" @click="sureDetail">确认</mu-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import HeaderTilte from "../../components/headerTilte";
    import Loading from "../../components/loading";

    export default {
      data(){
        return{
          showLoading:true,
          title:'关于我们',
          shopInfo:'',
          detailTitle:'',
          detailContent:'该商户未填写'
        }
      },
      mounted(){
        this.checkLogin();

        this.initShopInfo();
      },
      methods:{
        initShopInfo(){
          this.yesS.getShopInfo(
            this.$comParams()
          ).then(res => {
            this.shopInfo = res.data.info;
            this.showLoading = false
          })

        },
        toDetail(type){
          $('.aboutUsDiv').show();
          this.detailContent = '该商户未填写';
          //配送范围
          if(type == 1){
            this.detailTitle = '配送范围';
            if(!this.isEmpty(this.shopInfo.send_area)){
              this.detailContent = this.shopInfo.send_area;
            }
          }
          //订水须知
          else if(type == 2){
            this.detailTitle = '水票须知';
            if(!this.isEmpty(this.shopInfo.bill_notice)){
              this.detailContent = this.shopInfo.bill_notice;
            }
          }
        },
        sureDetail(){
          $('.aboutUsDiv').hide();
        }
      },
      components: {
        Loading,
        HeaderTilte},
      name: "about-us"
    }
</script>

<style scoped>
  @import "css/aboutUs.css";
</style>
